<!DOCTYPE html>
<html>
<head>
	<title>Slide Image Sample</title>
	<style>
		#container {
			width: 480px;
			height: 270px;
			overflow: hidden;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #000;
		}

		#photo {
			width: 2400px;
			animation: switch 20s ease-out infinite;
		}

		#photo > img {
			float: left;
			width: 480;
			height: 270px;
		}

		@keyframes switch {
			0%, 20% {
				margin-left: 0px;
			}
			20%, 40% {
				margin-left: -480px;
			}
			40%, 60% {
				margin-left: -960px;
			}
            60%, 80%{
                margin-left: -1440px;
            }
            80%, 100%{
                margin-left: 0px;
            }
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="photo">
            <img src="../images/carousel_1.png" >
			<img src="../images/carousel_2.png" >
            <img src="../images/carousel_3.png" >
            <img src="../images/carousel_4.png" >
		</div>
	</div>
</body>
</html>